<template>
  <page-meta
    :page-style="`overflow: ${
      state.paramsPopupShow ||
      state.detail.show ||
      state.modal.modalOk ||
      state.modal.modalNew
        ? 'hidden'
        : 'visible'
    }`"
  ></page-meta>
  <view class="activity-records">
    <my-nav
      ref="mynavRef"
      :class-name="`nav ${stickyRect.sticky && 'white'}`"
      title="个人记录"
    />
    <Info />
    <view id="list-title" :style="{ top: `${mynavRef?.height - 1}px` }">
      <view class="l">
        个人记录<text>(共{{ state.list.length }}条)</text>
      </view>
      <view class="r" @click="state.paramsPopupShow = true">筛选</view>
    </view>
    <List />
    <ParamsPopup />
    <MyActivityModal
      class="detail-modal"
      title=""
      :custom-style="{ width: '90%' }"
      :show="state.detail.show"
      @chnage="state.detail.show = false"
    >
      <MyBoard style="width: 100%" :matrix="state.detail.matrix" preview />
    </MyActivityModal>
    <MyActivityModal
      :show="state.modal.modalOk"
      :title="`恭喜你得出${state.modal.machine_num}个可行解~`"
      content="可以在【个人记录】里查看记录哦"
      @chnage="state.modal.modalOk = false"
    >
      <template #icon>
        <image
          style="width: 88px; height: 88px; margin: -88px 0 8px"
          src="https://images-cloud.qboson.com/miniProgram/task_ok.gif"
        />
      </template>
    </MyActivityModal>
    <MyActivityModal
      :show="state.modal.modalNew"
      :title="`恭喜你得出${state.modal.machine_num}个可行解，其中还有${state.modal.machine_first_num}个首次可行解！`"
      confirm-text="开心收下"
      @chnage="state.modal.modalNew = false"
    >
      <template #icon>
        <image
          style="width: 160px; height: 160px; margin: -125px 0 4px"
          src="https://images-cloud.qboson.com/miniProgram/task_new.png"
        />
      </template>
      <view style="margin-bottom: 24px; color: #963e32; text-align: center">
        <view style="margin-top: -2px; font-size: 12px; line-height: 170%">
          可以在【个人记录】里查看记录哦
        </view>
        <view>
          <text style="font-size: 44px; line-height: 44px; font-weight: 800">
            {{ state.modal.quantity }}
          </text>
          <text style="font-size: 14px">配额</text>
        </view>
      </view>
    </MyActivityModal>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onShow, onPageScroll, onShareAppMessage } from "@dcloudio/uni-app";
import Api from "@/utils/http";
import MyNav from "@/components/my-nav.vue";
import MyActivityModal from "@/components/my-activity-modal.vue";
import MyBoard from "@/components/my-board.vue";
import Info from "./modules/Info.vue";
import List from "./modules/List.vue";
import ParamsPopup from "./modules/ParamsPopup.vue";
import state, { initData } from "./useState";

const mynavRef = ref();
const stickyRect = reactive({
  sticky: false,
  top: 0,
});

onShow(() => {
  initData();
  Api.get("queen/config_info").then((res) => {
    state.user_id = res.user_id;
    state.quantity = res.quantity;
  });
  Api.get("queen/solutions_count/", { returnCode: true }).then((res) => {
    Object.assign(state.modal, res.data);
    if (res.code === "0") {
      state.modal.modalNew = true;
    } else if (res.code === "200") {
      state.modal.modalOk = true;
    }
  });

  uni
    .createSelectorQuery()
    .select("#list-title")
    .boundingClientRect((rect: any) => {
      stickyRect.top = rect.top - mynavRef.value.height;
    })
    .exec();
});

onPageScroll((e) => {
  if (e.scrollTop < stickyRect.top) {
    stickyRect.sticky = false;
  } else {
    stickyRect.sticky = true;
  }
});

onShareAppMessage(() => {
  return {
    path: `/pages/activity/index?id=${state.user_id}`,
    imageUrl: "https://images-cloud.qboson.com/miniProgram/share_card.png",
  };
});
</script>

<style scoped lang="scss">
.activity-records {
  @mixin back {
    background: radial-gradient(
        67% 16% at 85% -1%,
        #ffe6db 0%,
        rgba(255, 232, 177, 0) 100%
      ),
      radial-gradient(
        145% 79% at 17% 0%,
        rgba(255, 174, 139, 0.6) 0%,
        rgba(255, 222, 190, 0.6) 40%,
        rgba(255, 255, 255, 0.6) 100%
      ),
      #f8f8f8;
    background-size: 100% 100vh;
  }
  @include back;
  ::v-deep .nav {
    @include back;
    &.white {
      background: #fff;
    }
  }

  #list-title {
    position: sticky;
    display: flex;
    justify-content: space-between;
    padding: 16px 16px 0;
    background-color: #fff;
    .l {
      font-size: 14px;
      font-weight: 500;
      line-height: 100%;
      color: rgba(0, 0, 0, 0.9);
      text {
        margin-left: 6px;
        font-size: 11px;
        line-height: 100%;
        color: rgba(0, 0, 0, 0.4);
      }
    }

    .r {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 13px;
      line-height: 100%;
      color: rgba(0, 0, 0, 0.4);
      &::after {
        content: "";
        width: 16px;
        height: 16px;
        background-image: url(https://images-cloud.qboson.com/miniProgram/icon_find.png);
        background-size: 100% 100%;
      }
    }
  }

  ::v-deep .detail-modal {
    .my-activity-modal-content {
      padding: 0;
    }
    .title,
    .btn-group {
      display: none;
    }
  }
}
</style>
